<!-- 通用卡片式上传 -->
<template>
  <div class="upload-card">
    <!-- 包含上传功能 -->
    <div class="main-upload" v-if="!isClick">
      <!-- 包含上传图片 -->
      <div v-if="imgUrl" class="upload-img-box">
        <div class="upload-bg hover-bg">
          <!-- 预览 -->
         <img  :src="loadedPdfView" v-if="isPdf" @click="previewpdf"/>
         <div v-else v-viewer :url="[imgUrl]">
           <img  :src="imgUrl" alt="" />
         </div>
        </div>

        <!-- 重新上传 -->
        <div class="over-bg" v-if="!$attrs.disabled">
          <el-upload
            v-bind="$attrs"
            v-on="$listeners"
            action="string"
            fit="scale-down"
            :show-file-list="false"
          >
            <span>重新上传</span>
          </el-upload>
        </div>
      </div>
      <!-- 不包含上传图片 -->
      <div v-else>
        <el-upload
          v-bind="$attrs"
          v-on="$listeners"
          action="string"
          fit="scale-down"
          :show-file-list="false"
        >
          <div class="upload-bg">
            <img :src="defaultBgImg" alt="" />
          </div>
        </el-upload>
      </div>
      <p class="title" v-if="imgTitle">
         {{ imgTitle }}
         <slot />
      </p>
      <m-upload
        v-if="!isViewMode"
        class="m-upload-item"
        action="uploadUrl"
        v-bind="$attrs"
        :m-props="{urlObj: qrcodeImg, urlStr: 'url'}"
      />
    </div>
    <!-- 不包含上传功能 -->
    <div v-else class="click-module" @click="onClickBack">
      <div class="upload-bg">
        <img :src="defaultBgImg" alt="" />
      </div>
      <p class="title" v-if="imgTitle">{{ imgTitle }}</p>
    </div>
  </div>
</template>
<script>
export default {
  name: 'UploadCard',
  inheritAttrs: false,
  props: {
    isViewMode: {
      default: false,
      type: Boolean
    },
    // 标题
    imgTitle: {
      default: '',
      type: String
    },
    // 默认的图片
    defaultBgImg: {
      default: require('./img/pc-qyrz-tjzzfj-bg.png'),
      type: String
    },
    // 是否需要移动端扫码上传
    mobileUpload: {
      default: false,
      type: Boolean
    },
    // 默认pc上传地址
    uploadApi: {
      default: '',
      type: String
    },
    // 不触发上传弹窗，仅返回一个点击事件，需要配合事件回调使用
    isClick: {
      default: false,
      type: Boolean
    },
    // 上传成功后的图片路径
    imgUrl: {
      default: '',
      type: String
    }
  },
  watch: {
    'qrcodeImg.url': {
      handler(nv, ov) {
        this.$emit('getQrImg', nv)
      }
    }
  },
  data() {
    return {
      loadedPdfView: require('./img/pc-qyrz-glyzl-qyrzgh-gl-bg.png'),
      qrcodeImg:{
        url: ''
      }
    }
  },
  computed: {
    isPdf() {
      return this.imgUrl.includes('.pdf');
    },
  },
  
  methods: {
    onClickBack() {
      this.$emit('click')
    },
    // pdf预览
    previewpdf () {
      this.$pdfViewer({ url: this.imgUrl, title: 'PDF预览' })
    }
  }
}
</script>
<style lang="less">
.upload-card {
  .click-module,
  .main-upload {
    .upload-bg {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 380px;
        height: 242px;
      }
    }
    .upload-img-box {
      position: relative;
      .over-bg {
        position: absolute;
        width: 100%;
        height: 40px;
        bottom: 0;
        display: none;
        z-index: -2; 
        .el-upload {
          display: block;
          margin: 0 auto;
        }
        span {
          color: #fff;
          text-align: center;
          font-size: 14px;
          display: block;
          height: 40px;
          line-height: 40px;
        }
      }
    }

    .hover-bg:hover + .over-bg{
       z-index: 2;
       cursor: pointer;
       background-color: rgba(0, 0, 0, .6);
       display: block;
    }
    .over-bg:hover {
       z-index: 2;
       cursor: pointer;
       background-color: rgba(0, 0, 0, .6);
       display: block;
    }
  }
  .main-upload {
    position: relative;
    .upload-bg {
      img {
        width: 218px;
        height: 155px;
      }
    }
    .qrcode_box {
      top: -200px;
      right: -10px;
    }
    .title {
      text-align: center;
      margin-top: 15px;
      font-size: 14px;
      color: #333;
      letter-spacing: 0;
      line-height: 14px;
    }
  }
}
</style>
